import { useCallback } from 'react';
import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { NestedStory } from './stories/NestedStory';
import { PortalStory } from './stories/PortalStory';

<Meta title="Packages/Dropdowns/[patterns]" />

# Patterns

## Nested

### Listbox

A `Combobox` with `<Option type="next">` can be controlled to enable nested
listbox behavior. The nested listbox will then need an `<Option
type="previous">` to allow backwards navigation to the previous listbox. Use
`<Option type="next" hasSelection>` to indicate that the nested listbox contains
one or more selected options.

### Menu

Adding an `Item` with `type="next"` will enable nested menu behavior. It can be
implemented with or without controlled focus. The subsequent nested menu will
then need an `Item` with `type="previous"` to allow backwards navigation to the
previous menu.

<Canvas>
  <Story name="Nested">{args => <NestedStory {...args} />}</Story>
</Canvas>

## Portal

Dropdowns can be rendered in a different DOM location than inline with their
associated trigger component. This is done via React portals under the hood.
You typically will need to portal if you are using dropdown components inside an
element with `overflow: hidden` / `auto` / `scroll` CSS styles. See in these
examples that the dropdowns are currently getting cropped.

### Listbox portal

Enable the `listboxAppendToNode` property to see the full listbox.

### Menu portal

Enable the `appendToNode` property to see the full menu.

<Canvas>
  <Story
    name="Portal"
    args={{ listboxAppendToNode: false, menuAppendToNode: false }}
    argTypes={{
      listboxAppendToNode: { control: 'boolean', name: 'Combobox listboxAppendToNode' },
      menuAppendToNode: { control: 'boolean', name: 'Menu appendToNode' }
    }}
  >
    {args => <PortalStory {...args} />}
  </Story>
</Canvas>
